import React, { useEffect, useState } from "react";
import './index.css'
import Heand from "../component/heand";
import Sp from "../component/zhanshi";
// import get from "../api/api";
import axios from 'axios'
import { useNavigate } from "react-router-dom";
import { Input, Space, Empty, Menu } from 'antd'

function getItem(label, key, children, type) {
    return {
        key,

        children,
        label,
        type,
    };
}

const items = [
    getItem('商品分类', 'sub1', [
        getItem('分类', 'g1', [
            getItem('全部', '0'),
            getItem('鞋子', '1'),
            getItem('衣服', '7'),
            getItem('背包', '2'),
            getItem('手机', '3'),
            getItem('电脑', '6'),
            getItem('首饰品', '8'),
            getItem('生活用品', '4'),
            getItem('其他', '5')

        ], 'group')
        // getItem('Item 2', 'g2', [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
    ])]

function Myhome(props) {

    const navigate = useNavigate()
    const [searchdata, setSearchdata] = useState("")
    const row = []
    const [listt, setListt] = useState(null)
    const [searchTerm, setSearchTerm] = useState(null);
    const [lefttext, setLefttext] = useState(null)
    const gow = []
    const gly = -1
    const goxq = (objectid) => {
        navigate(`/${objectid}`, { state: { gly } })
    }


    const handleSearch = () => {
        // console.log("sdas")
        if (searchdata !== "") {



            axios.get('https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/quan', {
                headers: {
                    " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
                    "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
                    "Content-Type": "application/json"
                }
            })
                .then((res) => {
                    const searchData = res.data.results.filter(item => item.xiangqing.includes(searchdata))
                    setListt(searchData
                    )
                    setSearchTerm(searchData)

                })
                .catch((error) => {
                    console.log(error);
                });


        }
        else {
            axios.get('https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/quan', {
                headers: {
                    " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
                    "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
                    "Content-Type": "application/json"
                }
            })
                .then((res) => {

                    setListt(res.data.results);
                    setSearchTerm(res.data.results)
                    console.log("跟新了")

                })
                .catch((error) => {
                    console.log(error);
                });
        }
    }
    // const not=''
    useEffect(() => {

        handleSearch();
        // console.log("2");


    }, []);



    (listt || []).forEach((item) => {
        // console.log("chufale")
        row.push(
            <li onClick={() => goxq(item.objectId)} className="myhomeli" key={item.objectId}>

                <Sp className="image" key={item.objectId} image={item.imageurl} xiangqing={item.name} price={item.name} />
            </li>

        )
    });



    const onClick = (e) => {
        row.splice(0, row.length);
        console.log(e.key)
        if (e.key === '0') {
          console.log("只想0");
          setListt(searchTerm);
            (listt || []).forEach((item) => {
                // console.log("chufale")
                row.push(
                    <li onClick={() => goxq(item.objectId)} className="myhomeli" key={item.objectId}>

                        <Sp className="image" key={item.objectId} image={item.image} xiangqing={item.xiangqing} price={item.price} />
                    </li>

                )
            });

        } else {

            const left =searchTerm.filter(item =>item.bcid.includes(e.key));
            setListt(left);
            (listt || []).forEach((item) => {
                // console.log("chufale")
                row.push(
                    <li onClick={() => goxq(item.objectId)} className="myhomeli" key={item.objectId}>

                        <Sp className="image" key={item.objectId} image={item.image} xiangqing={item.xiangqing} price={item.price} />
                    </li>

                )
            });
        }


    };


    return (
        <div>

            <Heand />
            <div className="home">
                <div className="input">

                    <Input className="homeinput" type='text' value={searchdata} onChange={(e) => { setSearchdata(e.target.value) }} />

                    <button className="homebutton" onClick={handleSearch}>搜索</button>
                </div>

            </div>
            <div className="lefttext">
                <Menu
                    onClick={onClick}
                    style={{
                        width: 256,
                    }}
                    defaultSelectedKeys={['0']}
                    defaultOpenKeys={['sub1']}
                    mode="inline"
                    items={items}
                />
            </div>

            <div className="myhome">
                <ul>
                    {/* <Empty style={{display:searchTerm}}/> */}
                    {row}


                </ul>



            </div>

        </div>
    )
}
export default Myhome
